import React, { useState } from "react";
import { Button, Input, Typography, message } from "antd";
import "./index.css";
import { useNavigate } from "react-router-dom";
import { verifyCode } from "@/redux/user/ResetPassword/ResetPasswordStore";
const { Title } = Typography;
function CodeInput() {
  const navigate = useNavigate();
  const [code, setCode] = useState("");
  const [nextFlag, setNextFlag] = useState(false);

  function handleNext() {
    if (!nextFlag) return;
    try {
      verifyCode(code);
      navigate("/resetPassword/step3");
    } catch {
      message.warning("Verification failed:");
    }
  }
  function handleOnchange(code) {
    setNextFlag(true);
    setCode(code);
  }

  return (
    <div className="container">
      <div className="center-container">
        <div className="title">Reset Your Password</div>

        <div className="email-container">
          <Title level={5}>验证码：</Title>
          <Input.OTP
            className="code-input"
            onChange={handleOnchange}
            formatter={(str) => str.toUpperCase()}
          />
        </div>
        <div className="subimit-container">
          <Button className="next-button" onClick={handleNext}>
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}

export default CodeInput;
